import React, { Component } from 'react';
import { View,Text } from 'react-native';
import Former from '../../components/Former';
import SendBtn from "./components/sendBtn";
import { mobileRule } from '../../utils/rules';

export default class Protocol extends Component {
  onSubmit = (val) => {
    // console.log('++++++++++', val);
  };
  render() {
    const fields = [
      {
        type: 'TextInput',
        label: '文字输入',
        key: 'text',
        initialValue: '哦开',
        placeholder: 'test',
        rules: [
          {
            require: true
          }
        ]
      },
      {
        type: 'TextInput',
        label: '文字输入',
        key: 'name',
        initialValue: '0000',
        placeholder: 'test',
        extra: ({value}) => {
          return (
            <SendBtn
              sendAction={() => {
                if (mobileRule(value)) {
                  // console.log('sendAction', value);
                }
              }}
              disabled={!mobileRule(value)}
              sendError={this.props.user && this.props.user.sendError}
              style={{ width: 64 }}
            />
          )
        },
        rules: [
          {
            validation: (value, cb) => {
              if (value && value.length > 3) {
                cb('大于三');
              } else {
                cb();
              }
            }
          }
        ]
      },
      {
        type: 'Selecter',
        label: '选择器',
        key: 'Selecter',
        placeholder: '请选择',
        initialValue: 'world',
        help: '这是个必填项',
        afterChange: (value) => {console.log(value)},
        options: [
          { label: 'hello', value: 'hello' },
          { label: 'world', value: 'world' },
          { label: 'foo', value: 'foo' },
          { label: 'bar', value: 'bar' },
          { label: 'bar1', value: 'bar1' },
          { label: 'bar2', value: 'bar2' },
          { label: 'bar3', value: 'bar3' },
          { label: 'bar4', value: 'bar6' },
          { label: 'bar5', value: 'bar4' },
          { label: 'bar6', value: 'bar5' },
          { label: 'bar7', value: 'bar7' },
        ],
        rules: [
          {
            require: true,
            message: '必填项'
          }
        ]
      },
      {
        type: 'Selecter',
        label: '选择器',
        key: 'Selecter2',
        placeholder: '请选择',
        initialValue: 'world',
        help: '这是个必填项',
        afterChange: (value) => {console.log(value)},
        options: [
          { label: 'hello', value: 'hello' },
          { label: 'world', value: 'world' },
          { label: 'foo', value: 'foo' },
          { label: 'bar', value: 'bar' },
          { label: 'bar1', value: 'bar1' },
          { label: 'bar2', value: 'bar2' },
          { label: 'bar3', value: 'bar3' },
          { label: 'bar4', value: 'bar6' },
          { label: 'bar5', value: 'bar4' },
          { label: 'bar6', value: 'bar5' },
          { label: 'bar7', value: 'bar7' },
        ],
        rules: [
          {
            require: true,
            message: '必填项'
          }
        ]
      },
      {
        type: 'Date',
        label: '日期',
        key: 'date',
        placeholder: '请选择日期',
        initialValue: moment().format('YYYY-MM-DD'),
        mode: 'datetime',
        afterChange: value => {return <Text>{value}</Text>},
        rules: [
          {
            require: true,
            message: '必填项'
          }
        ]
      },
      {
        type: 'Bool',
        label: '是非题',
        key: 'bool',
        initialValue: 1,
        afterChange: value => {console.log(value)},
        transformer: [0, 1]
      },
      {
        type: 'Number',
        label: '数字',
        key: 'number',
        step: 1,
        initialValue: 789,
        maximumValue: 1000,
        minimumValue: 500,
        showValue: true,
        afterChange: value => {console.log(value)},
      },
    ];
    return (
      <View style={{ padding: 10, flex: 1, display: 'flex', flexDirection: 'column' }}>
        <Former fields={fields} onSubmit={this.onSubmit} />
      </View>
    );
  }
}
